<template>
    <div>
        <!--卡片-->
        <el-card class="box-card">
            <!--定义面包屑-->
            <el-breadcrumb separator=">">
                <el-breadcrumb-item :to="{ path: '/homePage' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>租赁管理</el-breadcrumb-item>
                <el-breadcrumb-item>代理门店</el-breadcrumb-item>
            </el-breadcrumb>
            <el-divider></el-divider>

            <el-form :inline="true" :model="queryCarShopData"  class="demo-form-inline">
                <el-form-item >
                    <el-input v-model="queryCarShopData.name" placeholder="请输入门店名"></el-input>
                </el-form-item>
                <el-form-item >
                    <el-input v-model="queryCarShopData.address" placeholder="请输入门店名位置"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="showCarShop">查询</el-button>
                    <el-button type="primary" @click="showAddForm({})">添加</el-button>
                </el-form-item>
            </el-form>

            <template>
                <el-table
                        :data="tableData"
                        :border="true"
                        stripe
                        style="width: 100%">
                    <el-table-column
                            prop="id"
                            label="门店id">
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="门店名">
                    </el-table-column>
                    <el-table-column
                            prop="provinceId"
                            label="省id">
                    </el-table-column>
                    <el-table-column
                            prop="cityId"
                            label="城市id">
                    </el-table-column>
                    <el-table-column
                            prop="areaId"
                            label="区id">
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="门店地址">
                    </el-table-column>
                    <el-table-column
                            prop="longitude"
                            label="经度">
                    </el-table-column>
                    <el-table-column
                            prop="dimensionality"
                            label="纬度">
                    </el-table-column>
                    <el-table-column
                            prop="addtime"
                            label="添加时间">
                    </el-table-column>
                    <el-table-column
                            prop="ishot"
                            label="是否是常用门店">
                        <template slot-scope="scope">
                            <span v-if="scope.row.ishot==0">不常用</span>
                            <span v-if="scope.row.ishot==1">常用</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="180">
                        <template slot-scope="scope">
                            <!-- 修改 -->
                            <el-button type="primary" icon="el-icon-edit" circle @click="showAddForm(scope.row)"></el-button>
                            <!-- 删除 -->
                            <el-button type="danger" icon="el-icon-delete" circle @click="deleteCarShop(scope.row.id)"></el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        :current-page="currentPage"
                        :page-sizes="[5, 7, 9]"
                        :page-size="pageSize"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>

                <el-dialog
                        title="新增门店信息"
                        :visible.sync="addForm"
                        width="30%">
                <span>
                    <!-- 新增门店信息 -->
                    <el-form ref="shopForm" :rules="rules" :model="addCarShopData" label-position="left" label-width="80px">
                        <el-input v-model="addCarShopData.id" type="hidden"></el-input>
                        <el-form-item label="门店名称" prop="name">
                            <el-input v-model="addCarShopData.name"></el-input>
                        </el-form-item>
                        <el-form-item label="是否常用门店" prop="ishot">
                            <el-select v-model="addCarShopData.ishot" placeholder="请选择所属门店">
                              <el-option
                                      v-for="item in ishot"
                                      :key="item.id"
                                      :label="item.name"
                                      :value="item.id">
                              </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="门店位置">
                            <template>
                              <div id="app">
                                <el-cascader
                                        size="large"
                                        :options="options"
                                        v-model="selectedOptions">
                                </el-cascader>
                              </div>
                            </template>
                        </el-form-item>
                        <el-form-item label="门店地址" prop="address">
                            <el-input v-model.number="addCarShopData.address"></el-input>
                        </el-form-item>
                    </el-form>
                </span>
                    <span slot="footer" class="dialog-footer">
                    <el-button @click="addForm = false">取 消</el-button>
                    <el-button type="primary" @click="addCarShop('shopForm')">确 定</el-button>
                    </span>
                </el-dialog>
            </template>

        </el-card>
    </div>
</template>

<script>
    import { provinceAndCityData, regionData, provinceAndCityDataPlus, regionDataPlus, CodeToText, TextToCode } from 'element-china-area-data'
    export default {
        name: "",
        data() {
            return {
                queryCarShopData: {
                    name: '',
                    address: ''
                },
                tableData: [],
                addCarShopData: {
                    id: '',
                    name: '',
                    ishot: '',
                    address: '',
                    provinceId: '',
                    cityId: '',
                    areaId: ''
                },
                rules: {
                    name: [
                        { required: true, message: '请输入门店名称', trigger: 'blur' }
                    ],
                    ishot: [
                        { required: true, message: '请选择是否是常用门店', trigger: 'blur' }
                    ],
                    address: [
                        { required: true, message: '请输入门店位置', trigger: 'blur' }
                    ]
                },
                ishot: [
                    {
                        id: 1,
                        name: '常用'
                    },
                    {
                        id: 0,
                        name: '不常用'
                    },
                ],
                options: regionData,
                selectedOptions: [],
                addForm: false,
                pageSize: 5,
                currentPage: 1,
                total: 0,
            }
        },
        methods: {
            handleSizeChange(value) {
                this.pageSize = value;
                this.showCarShop();
            },
            handleCurrentChange(value) {
                this.currentPage = value;
                this.showCarShop();
            },
            // 弹出添加窗口
            showAddForm(row) {
                // 先清空
                this.selectedOptions = [];
                this.addForm = true;
                this.addCarShopData = row;
                this.selectedOptions.push(row.provinceId);
                this.selectedOptions.push(row.cityId);
                this.selectedOptions.push(row.areaId)
            },
            // 查询门店
            showCarShop() {
                this.$axios({
                    method: 'get',
                    url: 'clms-lease/carshop/select',
                    params: {
                        pageno: this.currentPage,
                        pagesize: this.pageSize,
                        name: this.queryCarShopData.name,
                        address: this.queryCarShopData.address
                    }
                }).then( result => {
                    this.tableData = result.data.listData;
                    this.total = result.data.object.total
                })
            },
            // 新增门店
            addCarShop(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.addCarShopData.provinceId = this.selectedOptions[0];
                        this.addCarShopData.cityId = this.selectedOptions[1];
                        this.addCarShopData.areaId = this.selectedOptions[2];
                        if (this.addCarShopData.id == null) {
                            this.$axios({
                                method: 'post',
                                url: 'clms-lease/carshop/insert',
                                data: this.addCarShopData
                            }).then(result => {
                                if (result.data.code == 200) {
                                    this.$message.success(result.data.message);
                                    this.addForm = false;
                                    this.showCarShop()
                                } else {
                                    this.$message.error(result.data.message);
                                }
                            })
                        } else {
                            this.$axios({
                                method: 'post',
                                url: 'clms-lease/carshop/update',
                                data: this.addCarShopData
                            }).then(result => {
                                if (result.data.code == 200) {
                                    this.$message.success(result.data.message);
                                    this.addForm = false;
                                    this.showCarShop()
                                } else {
                                    this.$message.error(result.data.message);
                                }
                            })
                        }
                    } else {
                        this.$message.error("数据输入有误")
                    }
                });
            },
            // 删除门店
            deleteCarShop(id) {
                this.$confirm('确实删除当前门店吗?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    // 判断当前用户是不是管理员
                    this.$axios({
                        method: 'get',
                        url: 'clms-lease/carshop/delete',
                        params: {
                            id: id
                        }
                    }).then(result => {
                        if (result.data.code == 200) {
                            this.$message.success(result.data.message);
                            this.showCarShop()
                        } else {
                            this.$message.error(result.data.message);
                        }
                    })
                })
            }
        },
        created() {
            this.showCarShop()
        }
    }
</script>

<style scoped>

</style>